﻿<!DOCTYPE html>
<html>
<head>
    <title>CGI</title>
</head>
<body>
    <!--<!--01-->
    <article id="article1">
        <h3>CGI</h3>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
    </article>
    <script>
        var element = document.getElementById('article1');
        console.log(element);

        //var elements = document.getElementsByTagName('p');
        //console.log(elements);
    </script>
    <!--02-->
    <!--<article id="article1">
        <h3>CGI</h3>
        <p>Paragraph 1</p>
        <p class="special">Paragraph 2</p>
        <p class="special">Paragraph 3</p>
    </article>
    <script>
        var elements = document.getElementsByClassName('special');
        console.log(elements);
    </script>-->
    <!--03
    <article id="article1" class="my-custom-class">
        <h3>CGI</h3>
        <p>Paragraph 1</p>
        <p class="special">Paragraph 2</p>
        <p class="special">Paragraph 3</p>
    </article>
    <script>
        var a = document.getElementById('article1');
        console.log(a.getAttribute('class'));

        //var a = document.getElementById('article1');
        //a.setAttribute('class', 'dynamic-style');
        //console.log(a.getAttribute('class'));
    </script>-->
    <!--04
    <article id="article1" class="my-custom-class">
        <h4>Hello!</h4>
        <p>Paragraph 1</p>
    </article>
    <script>
        var a = document.getElementById('article1');
        console.log(a.childNodes);
        //text for white space before h4, between h4 & p and after p
    </script>-->
</body>
</html>